<!--
 * @Author: xueyang xueyang_xyy@163.com
 * @Date: 2022-05-21 18:00:56
 * @LastEditors: ZhengTZ 51902548+ZhengTZ-Max@users.noreply.github.com
 * @LastEditTime: 2023-03-01 20:53:38
 * @FilePath: /space-system/src/components/Overlay.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="overlay">
    <van-overlay :show="props.show" :lock-scroll="false">
      <div class="wrapper">
        <div class="block">
          <div v-if="props.title" class="tit_header">
            <span>{{ props.title }}</span>
            <img v-if="props.close" @click="handelToVisible" class="close" src="@/assets/home/close.png" alt="" />
          </div>
          <template v-if="props.status">
            <div class="block_header">
              <img :src="filterStatus().icon" alt="" />
              <div>
                {{ props.statusText ? props.statusText : filterStatus().text }}
              </div>
            </div>
          </template>

          <slot></slot>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import Error from "@/assets/error.png";
import Success from "@/assets/success.png";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({
  show: {
    type: Boolean,
  },
  title: {
    type: String,
    default: "",
  },
  close:{
    type:Boolean,
    default:false
  },
  // 0-无状态 1-成功 2-失败
  status: {
    type: Number,
    default: 0,
  },
  statusText:{
    type:String,
    default:""
  }
});
const filterStatus = () => {
  let status = props.status;
  console.log(props.status);
  let StatusRow = {};
  if (status == 1) {
    StatusRow.icon = Success;
    StatusRow.text = store?.state?.lang?.lang == "zh" ? "预约成功" : "Appointment successful";
  } else if (status == 2) {
    StatusRow.icon = Error;
    StatusRow.text = store?.state?.lang?.lang == "zh" ? "预约失败" : "Appointment failed";
  }
  return StatusRow;
};
const emit = defineEmits(["cancel"]);
const handelToVisible = () => {
  emit("cancel");
};
</script>

<style lang="scss" scoped>
.overlay {
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 20px;
  }
  .block {
    max-width: 340px;
    padding: 20px;
    border-radius: 14px;
    box-sizing: border-box;
    background-color: #fff;
    .tit_header {
      position: relative;
      text-align: center;
      margin-bottom: 24px;
      font-size: 17px;
      font-weight: 600;
      .close{
        position: absolute;
        top:calc(50% - 7.5px);
        right: 0;
        width: 15px;
        height: 15px;
      }
    }
    .block_header {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      img {
        width: 44px;
        height: 44px;
        margin-bottom: 15px;
      }
    }
  }
}
</style>
